<template>
    <div>
        <div style="height: 102px;border-bottom: 2px solid #ff6700">
            <div style="width: 1226px;margin: auto">
                <div style="width: 94px;margin-top: 26px;float: left">
                    <a href="/">
                        <img src="http://i.serengeseba.com/uploads/i_4_2503644824x1245481406_26.jpg" width="48px"
                             height="48px" style="border-radius: 25%;">
                    </a>
                </div>
                <div>
                    <h2 style="margin-top: 26px;float:left;line-height: 48px;font-size: 28px;font-weight: 400">
                        确认订单</h2>
                </div>
                <div style="float: right;margin-top:40px;font-size:20px;color: #FF6700" class="dengLu">
          <span v-show="xianshi_1">
              你好 &nbsp{{ userName }}
          </span>
                    &nbsp &nbsp
                    <span v-show="xianshi_2">
               {{ userEmail }}
            </span>
                </div>
            </div>
        </div>
        <div style="background: #f5f5f5;margin: 0 auto;padding-top: 30px;height: 1500px">
            <div style="background-color: white;width: 1300px;margin: 0 auto;padding-top: 30px;height: 1000px">
                <div>
                    <userAddress ref="diZhi"></userAddress>
                </div>
                <div>
                    <div style="color: #333;font-size: 18px;line-height: 40px;padding: 0 24px">
                        商品及优惠券
                    </div>

                    <el-table ref="multipleTable" :data="shoppingCart" tooltip-effect="dark">
                        <el-table-column align="right" width="100px">
                            <template v-slot="scope">
                                <el-image
                                        style="width: 40px; height: 40px"
                                        :src="scope.row.prod_pic"
                                >
                                </el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prod="prod_title" width="600" align="center">
                            <template slot-scope="scope">
                                    {{ scope.row.prod_title }}&nbsp&nbsp&nbsp{{ scope.row.prod_version }}
                            </template>
                        </el-table-column>
                        <el-table-column prod="prod_title" width="300" align="center">
                            <template slot-scope="scope">
                                    {{ scope.row.prod_price_current }}元 x &nbsp&nbsp{{ scope.row.amount }}
                            </template>
                        </el-table-column>
                        <el-table-column prod="prod_title" width="300" align="center">
                            <template slot-scope="scope">
                                <span style="color: #FF6700">
                                      {{ scope.row.prod_price_current * scope.row.amount }}元
                                </span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div style="width:1250px;margin:0 auto;border-top: 1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;margin-top: 40px;height: 100px ">
                    <div style="padding-top: 30px">
                            <span style=" color: #333;font-size: 18px;line-height: 38px;">
                                 配送方式
                            </span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                        <span style="color: #FF6700">
                                 包邮
                            </span>
                    </div>
                </div>
                <div class="foot-right">
                    <div style="line-height: 50px;padding-bottom: 20px">
                        <span style="color: #FF6700">
                           应付总额 ：
                        <span style="font-size: 30px">{{ money }}</span>
                        元
                        </span>
                    </div>
                    <div class="anNiu" style="float: left;margin-right: 30px;">
                        <router-link to="/Cart" tag="a">返回购物车</router-link>
                    </div>
                    <div class="anNiu" style="float: left">
                        <a href="javascript:void(0);" @click="pay">去结算</a>
                    </div>
                </div>
            </div>
        </div>

      <el-dialog
          title="确认付款"
          :visible.sync="openPay"
          width="30%"
          style="min-width: 300px">
        <pay :orderNum="orderNum"></pay>
      </el-dialog>
    </div>

</template>

<script>
import userAddress from "./portal/userAddress";
import {toPay} from "@/api/Cart";
import pay from "@/components/payment/pay";

export default {
    name: "CheckOrder",
    components: {userAddress,pay},
    data() {
      return {
        //名字展示或邮箱展示
        userName: this.$store.getters.userName,
        userEmail: this.$store.getters.email,
        xianshi_1: true,
        xianshi_2: false,
        //选中的商品
        shoppingCart: [],
        //总计
        money: undefined,
        //购物车商品id
        ids:[],
        // 输密码的支付窗口
        openPay: false,
        // 订单号
        orderNum: undefined
      }
    },
    methods: {
        //名字展示或邮箱展示
        xianshi() {
            if (this.$store.getters.userName != null) {
                this.xianshi_1 = true
                this.xianshi_2 = false
            } else {
                this.xianshi_1 = false
                this.xianshi_2 = true
            }
        },
        getParams() {
            const routerParams = this.$route.query.cart_1
            this.shoppingCart = routerParams
            console.log(this.shoppingCart)
            let sum = 0;
            for (let obj of this.shoppingCart) {
                sum += obj.amount * obj.prod_price_current
            }
            this.money = sum
        },
        // 结算
        pay(){
          this.ids = []
          for (let argument of this.shoppingCart) {
             this.ids.push(argument.id)
          }
          toPay(this.ids,this.$refs.diZhi.ChosenAddressId).then((response) => {
            if (response.succ) {
              console.log("请输入密码去付款")
              this.orderNum = response.orderNum
              this.openPay = true;
            } else {
              alert("支付失败，请稍后重试")
            }
          })
        },
    },
  created() {
        this.getParams()
    },
    watch: {
        '$route': 'getParams'
    },

}
</script>

<style scoped>

    .foot-right {
        width: 400px;
        height: 50px;
        margin-top: 50px;
        float: right;
    }

    .anNiu {
        width: 158px;
        height: 38px;
        background-color: #ff6a03;
        border-color: #ff6a03;
        text-align: center;

    }

    .anNiu a {
        color: white;
        font-size: 14px;
        line-height: 38px;
        text-align: center;
    }

</style>
